<template>
  <v-card flat width="1200" class="mx-auto">
    <v-card-title>
      <div class="d-flex justify-end" style="font-size: 12px;width: 100%;">
        <div class="mx-2">
          <v-icon>mdi-printer</v-icon>
          <span>打印</span>
        </div>
        <div>
          <v-icon>mdi-download</v-icon>
          <span>下载</span>
        </div>
      </div>
    </v-card-title>
    <v-card-text class="pb-10">
      <div class="printcontent">
        <div data-v-8f4e2b74="" class="template-head">wz-200806</div>
        <div data-v-8f4e2b74="" class="template-name">团队结算单</div>
        <div class="template-body">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="template-table" style="table-layout: fixed;">
            <tr>
              <td colspan="1" class="table-cell">产品名称</td>
              <td colspan="3" class="table-cell">大理丽江6日游</td>
              <td colspan="1" class="table-cell">人数</td>
              <td colspan="3" class="table-cell">成人x8，儿童x2，领队x1</td>
              <td colspan="1" class="table-cell">客户公司</td>
              <td colspan="3" class="table-cell">柳州龙城康辉国际旅行社(阳光100营业部)</td>
              </tr>
            <tr>
              <td colspan="1" class="table-cell">导游</td>
              <td colspan="3" class="table-cell">吴晓明</td>
              <td colspan="1" class="table-cell">领队</td>
              <td colspan="3" class="table-cell">吴宇</td>
              <td colspan="1" class="table-cell">接团日期</td>
              <td colspan="3" class="table-cell">2020-08-06</td>
            </tr>
          </table>
          <div class="template-box">
            <h3 class="title">团费收入</h3>
            <div>
              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="template-table" style="table-layout: fixed;">
                <thead>
                  <tr>
                    <th colspan="5" class="table-cell">项目名称</th>
                    <th colspan="1" class="table-cell" style="text-align: center;">单价</th>
                    <th colspan="1" class="table-cell" style="text-align: center;">数量</th>
                    <th colspan="1" class="table-cell" style="text-align: center;">币种</th>
                    <th colspan="2" class="table-cell" style="text-align: center;">总金额</th>
                    <th colspan="2" class="table-cell">备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td colspan="5" class="table-cell">儿童团费</td>
                    <td colspan="1" class="table-cell" style="text-align: right;">3,600</td>
                    <td colspan="1" class="table-cell" style="text-align: center;">2</td>
                    <td colspan="1" class="table-cell" style="text-align: center;">CNY</td>
                    <td colspan="2" class="table-cell" style="text-align: right;">7,200</td>
                    <td colspan="2" class="table-cell"></td>
                  </tr>
                  <tr>
                    <td colspan="5" class="table-cell">成人团费</td>
                    <td colspan="1" class="table-cell" style="text-align: right;">5,600</td>
                    <td colspan="1" class="table-cell" style="text-align: center;">8</td>
                    <td colspan="1" class="table-cell" style="text-align: center;">CNY</td>
                    <td colspan="2" class="table-cell" style="text-align: right;">44,800</td>
                    <td colspan="2" class="table-cell"></td>
                  </tr>
                  <tr>
                    <td colspan="5" class="template-table-total"><div>合计</div></td>
                    <td colspan="1" class="template-table-total"></td>
                    <td colspan="1" class="template-table-total"></td>
                    <td colspan="1" class="template-table-total" style="text-align: center;">CNY</td>
                    <td colspan="2" class="template-table-total" style="text-align: right;">52,000</td>
                    <td colspan="2" class="template-table-total"></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
export default {

}
</script>

<style scoped>
  .template-table {
    border: 1px solid #616161;
    border-collapse: collapse;
    line-height: 22px;
  }
  .template-table .table-cell {
    padding: 6px 8px 6px 8px;
    background-color: #fff;
    border: 1px solid #616161;
    text-align: left;
    font-weight: 400;
  }
  .template-head {
    line-height: 36px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 10px;
  }
  .template-name {
    font-size: 20px;
    color: #333;
    text-align: center;
    padding-bottom: 5px;
  }
  .template-body {
    overflow: hidden;
  }
  .template-table .template-box {
    box-sizing: border-box;
  }
  .template-body .template-box .title {
    border: 1px solid #616161;
    border-top-width: 0;
    border-bottom-width: 0;
    height: 32px;
    line-height: 32px;
    background-color: #606060;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
  }
  .template-body .template-table .template-table-total {
    padding: 6px 8px 6px 8px;
    background-color: #fff;
    border: 1px solid #616161;
    text-align: left;
    font-weight: 700;
  } 
</style>